<template>
  <div>
    <a-descriptions title="基本信息" bordered>
      <a-descriptions-item label="用户名称">{{
        userInfo.name
      }}</a-descriptions-item>
      <a-descriptions-item label="用户性别">{{
        userInfo.gender == '1' ? '男' : '女'
      }}</a-descriptions-item>
      <a-descriptions-item label="用户年龄">{{
        userInfo.age
      }}</a-descriptions-item>
      <a-descriptions-item label="用户头像">
        <a-image :width="100" :src="userInfo.avatar" />
      </a-descriptions-item>
      <a-descriptions-item label="医生头像">
        <a-image :width="100" :src="doctorInfo.avatar" />
      </a-descriptions-item>
      <a-descriptions-item label="医生名称">{{
        doctorInfo.name
      }}</a-descriptions-item>
      <a-descriptions-item label="所属社区">{{
        communityInfo.communityName
      }}</a-descriptions-item>
      <a-descriptions-item label="社区照片">
        <a-image :width="100" :src="communityInfo.communityImage" />
      </a-descriptions-item>
      <a-descriptions-item label="预约时间">
        {{ DateConversion(reservationInfo.appointmentDate) }}
        {{
          reservationInfo.appointmentTime == 'afternoon' ? '下午' : '上午'
        }}</a-descriptions-item
      >
      <a-descriptions-item label="服务状态">
        <a-tag color="blue" v-if="reservationInfo.status == 1">已预约</a-tag>
        <a-tag color="green" v-if="reservationInfo.status == 2">就诊中</a-tag>
        <a-tag color="red" v-if="reservationInfo.status == 3">已过期</a-tag>

        <a-tag color="cyan" v-if="reservationInfo.status == 4">待支付</a-tag>
        <a-tag color="pink" v-if="reservationInfo.status == 5">
          支付失败
        </a-tag>
        <a-tag color="green" v-if="reservationInfo.status == 6">
          就诊成功
        </a-tag>
      </a-descriptions-item>
    </a-descriptions>

    <a-descriptions
      style="margin: 20px 0"
      v-if="isDrugs"
      title="就诊情况"
      bordered
    >
      <a-descriptions-item :span="3" label="症状">{{
        diagnosisInfo.symptom
      }}</a-descriptions-item>
      <a-descriptions-item :span="3" label="症状描述">{{
        diagnosisInfo.descriptions
      }}</a-descriptions-item>
      <a-descriptions-item :span="3" label="医嘱/用药事项">
        {{ diagnosisInfo.suggestion }}</a-descriptions-item
      >
    </a-descriptions>

    <!-- 药品表 -->
    <a-table
      v-if="isDrugs"
      :columns="drugsColumns"
      :data-source="drugsList.data"
      :pagination="false"
      tableLayout="fixed"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'drugsName'">
          {{ record.drugs.drugsName }}
        </template>
        <template v-if="column.key === 'price'">
          {{ record.drugs.price }}
        </template>
        <template v-if="column.key === 'drugNumber'">
          {{ record.prescribe.drugNumber }}
        </template>
        <template v-if="column.key === 'frequency'">
          {{ record.prescribe.frequency }}
        </template>
      </template>
    </a-table>

    <div v-if="isDrugs" class="price">
      <span class="title">总价:</span>
      <span class="money">{{ diagnosisInfo.totalPrice }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { drugsColumns } from './columns'
import { apiQueryUser } from '@/api/User/api'
import { apiGetInfo, apiGetDiagnosis } from '@/api/Service/api'
import { apiGetDetails } from '@/api/Community/api'

const propr = defineProps(['info'])

const drugsList = reactive({
  data: [],
})

const userInfo = ref<any>({})

const doctorInfo = ref<any>({})

const reservationInfo = ref<any>({})

const communityInfo = ref<any>({})

const diagnosisInfo = ref<any>({})

const isDrugs = ref<boolean>(false)

//预约时间转换
const DateConversion = (date: string) => {
  return date?.split('T')[0]
}
onMounted(async () => {
  console.log()
  let { userId, doctorId, communityId, reservationId } = propr.info
  // 获取用户信息
  let userRes = await apiQueryUser(userId)
  userInfo.value = userRes.data

  // 获取医生信息
  let doctorRes = await apiQueryUser(doctorId)
  doctorInfo.value = doctorRes.data

  // 获取预约信息
  let Rres = await apiGetInfo(reservationId)
  reservationInfo.value = Rres.data

  // 获取社区信息
  let Cres = await apiGetDetails(communityId)
  communityInfo.value = Cres.data

  //获取就诊信息
  let status = Number(reservationInfo.value.status)
  if (status >= 4) {
    isDrugs.value = true
    let diagnosis = await apiGetDiagnosis(reservationId)
    diagnosisInfo.value = diagnosis.data.diagnosis
    drugsList.data = diagnosis.data.drugs
  }
})
</script>

<style lang="less" scoped>
.price {
  display: flex;
  font-size: 28px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;

  color: #d30404;

  .money {
    font-weight: 600;
  }
}
</style>
